<template>
	<div class="resource_content">
		<div class="button">
			<el-checkbox :indeterminate="isIndeterminate" v-model="allChecked" @change="handleCheckboxAllChecked">
				{{ checkedResource.length > 0 ? `已选 ${checkedResource.length} 项` : '全选' }}
			</el-checkbox>
			<div class="batch_button">
				<el-button-group v-if="checkedResource.length > 0">
					<el-button size="small" type="text" icon="el-icon-rank" @click="handleBatchMove()">移动</el-button>
					<el-button size="small" type="text" icon="el-icon-document-copy" @click="handleBatchCopy()">复制</el-button>
					<el-button size="small" type="text" icon="el-icon-s-promotion" @click="handleBatchPublish()">发布</el-button>
					<el-button size="small" type="text" icon="el-icon-delete" @click="handleBatchDelete()">删除</el-button>
					<el-button size="small" type="text" icon="el-icon-tickets" @click="handleBatchCatalog()">编目</el-button>
					<el-button size="small" type="text" icon="el-icon-collection-tag" @click="handleBatchLabel()">标签</el-button>
					<el-button size="small" type="text" icon="el-icon-star-off" @click="handleBatchCollect()">收藏</el-button>
					<el-button size="small" type="text" icon="el-icon-warning-outline" @click="handleBatchInform()">举报</el-button>
				</el-button-group>
			</div>
			<template v-if="checkedFolder !== 0 || $route.name === 'dataResourcelibDetail'">
				<el-button class="return" type="text" icon="el-icon-back" @click="handleUpOneLevel">{{ returnButton }}</el-button>
			</template>
			<el-button class="refresh" type="text" icon="el-icon-refresh" @click="queryResourceData">刷新</el-button>
			<show-mode size="24" v-model="showMode"></show-mode>
		</div>
		<div class="content" v-loading="loading" oncontextmenu="return false;">
			<template v-if="showMode === 1">
				<res-block v-model="checkedResource" :data="resourceData" :btn-list="libButton" @hand="handleContextEvent"></res-block>
			</template>
			<template v-else-if="showMode === 2">
				<res-table v-model="checkedResource" :data="resourceData" :btn-list="libButton" @hand="handleContextEvent"></res-table>
			</template>
		</div>
		<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryResourceData()"></sw-pagination>
	</div>
</template>

<script>
import resBlock from './block';
import resTable from './table';
import { mapGetters } from 'vuex';
import { getResourceList } from '@/api/data/tbNetDisk';
export default {
	components: { resBlock, resTable },
	beforeRouteEnter(to, from, next) {
		next((vm) => {
			vm.$store.dispatch('getCurLibFolder', to.params.id);
		});
	},
	props: {
		data: { type: Object, default: () => {} },
		libData: { type: Object, default: () => {} }
	},
	data() {
		return {
			showMode: 1,

			loading: false,

			allChecked: false,
			checkedResource: [],
			isIndeterminate: false,

			dataCount: 0,
			queryData: { page: 1, limit: 120 },
			resourceData: [],

			folderPathList: []
		};
	},
	created() {
		let info = this.siteConfig.find((item) => item.type === 1);
		console.log(info);
		this.showMode = info.filed6 || 1;
	},
	computed: {
		...mapGetters(['siteConfig']),
		libraryId() {
			return this.libData.id || '';
		},
		libButton() {
			return this.libData.libButton || [];
		},
		checkedFolder() {
			return this.$route.query.folder || '0';
		},
		returnButton() {
			if (this.checkedFolder == 0) {
				return '返回资源库';
			} else {
				return '返回上一级';
			}
		}
	},
	watch: {
		showMode() {
			this.checkedResource = [];
		},
		libData() {
			this.queryResourceData();
		},
		checkedFolder() {
			this.queryResourceData();
		},
		checkedResource(arr) {
			if (this.resourceData.length > 0) {
				let count = arr.length;
				this.allChecked = count === this.resourceData.length;
				this.isIndeterminate = count > 0 && count < this.resourceData.length;
			}
		}
	},
	methods: {
		//获取资源数据
		async getResourceData() {
			let params = { ...this.queryData, ...this.data, dirId: this.libraryId, pId: this.checkedFolder };
			let result = await getResourceList(params).then((res) => res.data);
			this.loading = false;
			if (result.code === 0) {
				this.dataCount = parseInt(result.count);
				this.resourceData = !result.data ? [] : result.data;
			}
		},

		//查询资源数据
		queryResourceData() {
			this.loading = true;
			this.getResourceData();
		},

		//全选操作
		handleCheckboxAllChecked(flag) {
			this.checkedResource = !flag ? [] : this.resourceData.map((item) => item.id);
			this.isIndeterminate = false;
		},

		//获取文件夹路径数据
		getFolderPathData(id) {
			let folderData = this.curLibFolder.find((item) => item.id === id);
			if (!!folderData) {
				this.folderPathList.unshift(folderData);
				folderData.pid !== 0 && this.getFolderPathData(folderData.pid);
			}
		},

		//返回上一级
		handleUpOneLevel() {
			let libName = '';
			let routeName = this.$route.name;
			if (routeName === 'dataResourcelibDetail') {
				libName = 'resourcelib';
			} else if (routeName === 'dataPubliclibDetail') {
				libName = 'publiclib';
			}
			if (this.checkedFolder !== 0) {
				let query = { name: this.$route.query.name };
				let data = this.folderPathList[this.folderPathList.length - 1];
				if (!!data && data.pid !== 0) {
					query['folder'] = data.pid;
				}
				this.$router.push({ path: `/data/${libName}/${this.libraryId}`, query });
			} else {
				this.$router.push({ path: `/data/${libName}` });
			}
		},

		handleContextEvent(type, data) {
			this.$emit('hand', type, data);
		}
	}
};
</script>

<style lang="scss" scoped>
.resource_content {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: hidden;
	.button {
		display: flex;
		align-items: center;
		flex-shrink: 0;
		padding: 6px 0;
		margin-top: 6px;
		.el-radio-group {
			float: right;
		}

		.el-checkbox {
			display: flex;
			align-items: center;
			float: left;
			height: 100%;
		}

		.el-checkbox__input {
			font-size: 0;
		}

		.el-checkbox__label {
			line-height: 1;
			color: #606266;
		}

		.el-button.refresh,
		.el-button.return {
			padding: 4px;
			margin-right: 10px;
		}
	}
	.batch_button {
		flex: 1;
		overflow: hidden;
		margin-left: 10px;
		.el-button-group {
		}
	}
	.content {
		flex: 1;
		overflow: hidden;
	}
}
</style>
